<template>
  <el-card>
    <div class="body_box">
      <div class="box_header">
        <el-form :model="queryParams" @submit.prevent>
          <span
            style="
              font-size: 20px;
              font-weight: 600;
              height: 7vh;
              line-height: 7vh;
              margin-left: 50px;
            "
            >疾病信息统计与管理</span
          >
          <el-row
            :gutter="28"
            style="width: 50vw; padding-top: 9px; height: 7vh; float: right"
          >
            <el-col :span="8">
              <el-form-item style="float: right">
                <span style="font-size: 18px">&nbsp;</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="drugname">
                <el-input
                  placeholder="输入居民姓名"
                  @change="handleSelect"
                  v-model="queryParams.name"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item>
                <el-button type="success" @click="handleSelect()"
                  >查询</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="box_content">
        <el-table
          @row-click="handleEdit"
          :data="
            items.slice((currentPage - 1) * pageSize, currentPage * pageSize)
          "
          id="eltable"
          height="61vh"
          :header-cell-style="{ 'text-align': 'center', 'font-size': '14px' }"
          :cell-style="{ 'text-align': 'center' }"
        >
          <el-table-column prop="name" label="姓名" width="120" />
          <el-table-column prop="sex" label="性别" width="100">
            <template #default="props">
              {{ props.row.sex == 1 ? "男" : "女" }}
            </template>
          </el-table-column>
          <el-table-column prop="disease" label="疾病" width="510" />
          <el-table-column prop="lastTime" label="上次家访时间" />
          <el-table-column prop="lastResult" label="上次家访状况">
            <template #default="props">
              <el-tag
                :type="
                  props.row.lastResult == '良好'
                    ? 'primary'
                    : props.row.lastResult == '尚可'
                    ? 'success'
                    : props.row.lastResult == '注意'
                    ? 'warning'
                    : 'danger'
                "
                >{{ props.row.lastResult }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="nextTime" label="距离下次家访时间">
            <template #default="props">
              <el-tooltip
                class="item"
                effect="dark"
                :content="props.row.nextTime"
                placement="top-start"
              >
                <span :class="[props.row.nextTime < 3 ? 'red' : 'black']">{{
                  props.row.nextTime < 0
                    ? "已逾期"
                    : props.row.nextTime < 3
                    ? "不足三天"
                    : props.row.nextTime + "天"
                }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="175" prop="flagFinished">
            <template #default="props">
              <el-button
              link type="primary"
                size="small"
                @click="HomeVisits(props.row.id)"
                :disabled="props.row.flagFinished == 1"
                >家访</el-button
              >
              <el-button
                size="small" link type="primary"
                @click="ShowDialogDelay(props.row.id)"
                :disabled="props.row.flagFinished == 1"
                >延期</el-button
              >
            </template>
          </el-table-column>
          <template v-slot:empty>
            <span style="color: #969799">未查询到相关信息</span>
          </template>
        </el-table>
        <div class="page">
          <el-pagination
            v-model:current-page="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            background
            :total="items.length"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <el-dialog
      v-model="DialogHomeVisit"
      title="家访记录表"
      close-on-press-escape
      :close-on-click-modal="false"
      width="480"
      custom-class="Mydialog"
    >
      <el-form
        :model="submitParams"
        :rules="rules"
        ref="submitParamsForm"
        class="Form"
      >
        <el-form-item label="姓名：" prop="name">
          <el-input type="text" v-model="submitParams.name" class="Form_item" />
        </el-form-item>
        <el-form-item label="性别：" prop="sex">
          <el-radio-group v-model="submitParams.sex" class="Form_item">
            <el-radio :label="1" style="margin-left: 40px">男</el-radio>
            <el-radio :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="疾病信息：" prop="disease">
          <el-input
            type="text"
            v-model="submitParams.disease"
            class="Form_item"
          />
        </el-form-item>
        <el-form-item label="本次家访状况：" prop="lastResult">
          <el-select
            v-model="submitParams.lastResult"
            placeholder="请选择家访状况"
            class="Form_item"
          >
            <el-option label="良好" value="良好" />
            <el-option label="尚可" value="尚可" />
            <el-option label="注意" value="注意" />
            <el-option label="高危" value="高危" />
          </el-select>
        </el-form-item>
        <el-form-item label="本次家访结果：" prop="result">
          <el-input
            type="textarea"
            v-model="submitParams.result"
            :autosize="{ minRows: 2, maxRows: 4 }"
            class="Form_item"
          />
        </el-form-item>
        <el-form-item label="下次家访时间：" prop="nextTime">
          <el-date-picker
            v-model="submitParams.nextTime"
            type="datetime"
            placeholder="请选择下次家访时间"
            format="YYYY-MM-DD hh:mm:ss"
            value-format="x"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog()">关闭</el-button>
          <el-button type="primary" @click="saveHomeForm()"> 保存 </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 延期 -->
    <el-dialog
      v-model="DialogDelay"
      title="下次家访时间-延长"
      custom-class="Mydialog"
      close-on-press-escape
      :close-on-click-modal="false"
      width="280"
    >
      <el-form :model="delay">
        <el-date-picker
          v-model="delay.nextTime"
          type="datetime"
          placeholder="请选择下次家访时间"
          format="YYYY-MM-DD hh:mm:ss"
          value-format="x"
        />
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog()" link type="primary">关闭</el-button>
          <el-button  @click="Delay()" link type="primary"> 延长 </el-button>
        </span>
      </template>
    </el-dialog>
    <a-float-button
      shape="circle"
      type="primary"
      :style="{
        top: '145px',
        right:'17px'
      }"
      @click="handleClick()"
    >
      <template #icon>
        <svg
          t="1710575865787"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="8963"
          width="16"
          height="16"
        >
          <path
            d="M853.333333 245.333333H245.333333l93.866667-93.866666c12.8-12.8 12.8-34.133333 0-46.933334-12.8-12.8-34.133333-12.8-46.933333 0l-145.066667 145.066667c-12.8 12.8-12.8 34.133333 0 46.933333l145.066667 145.066667c6.4 6.4 14.933333 10.666667 23.466666 10.666667s17.066667-4.266667 23.466667-10.666667c12.8-12.8 12.8-34.133333 0-46.933333L256 311.466667h597.333333c6.4 0 10.666667 4.266667 10.666667 10.666666v426.666667c0 6.4-4.266667 10.666667-10.666667 10.666667H170.666667c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h682.666666c40.533333 0 74.666667-34.133333 74.666667-74.666667V320c0-40.533333-34.133333-74.666667-74.666667-74.666667z"
            fill="#ffffff"
            p-id="8964"
          ></path>
        </svg>
      </template>
    </a-float-button>
  </el-card>
</template>
<script>
import { ref } from "vue";
import { pageMixin } from "@/mixins/pageMixin";
import { getTimeFormat, getTimeFor } from "@/mixins/dateTimeFormat";
import {
  getList,
  delayNextTime,
  save,
  history,
  selectByName,
} from "@/api/disease";
export default {
  mixins: [pageMixin],
  data() {
    return {
      clickNumber: 0,
      DialogHomeVisit: false,
      DialogDelay: false,
      queryParams: {},
      delay: {},
      items: [],
      submitParams: {},
      rules: {
        name: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
        ],
        sex: [
          {
            required: true,
            message: "请选择性别",
            trigger: "blur",
          },
        ],
        disease: [
          {
            required: true,
            message: "请输入患者疾病",
            trigger: "blur",
          },
        ],
        result: [
          {
            required: true,
            message: "请输入本次家访结果",
            trigger: "blur",
          },
        ],
        lastResult: [
          {
            required: true,
            message: "请选择本次家访状况",
            trigger: "blur",
          },
        ],
        nextTime: [
          {
            required: true,
            message: "请输入",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.queryList();
  },
  methods: {
    handleEdit(val) {
      this.clickNumber++;
      this.queryParams.idcard = val.idcard;
      setTimeout(() => {
        if (this.clickNumber == 2) {
          history(this.queryParams).then((res) => {
            res.data.data.forEach((item) => {
              item.lastTime = getTimeFor(item.lastTime);
              item.nextTime = this.computedTime(
                new Date(item.nextTime),
                new Date()
              );
            });
            this.items = res.data.data;
          });
        }
        if (this.clickNumber == 3) {
          this.$router.push(`/diseaseHealth/details?params=${val.idcard}`);
        }
        this.clickNumber = 0;
      }, 400);
    },
    handleClick() {
      this.queryList();
    },
    queryList() {
      getList().then((res) => {
        res.data.data.forEach((item) => {
          item.lastTime = getTimeFor(item.lastTime);
          item.nextTime = this.computedTime(
            new Date(item.nextTime),
            new Date()
          );
        });
        this.items = res.data.data;
      });
    },

    computedTime(nextTime, nowTime) {
      var days = nextTime.getTime() - nowTime.getTime();
      var dayRes = Math.ceil(days / (1000 * 60 * 60 * 24));
      return dayRes;
    },

    ShowDialogDelay(id) {
      this.delay.id = id;
      this.DialogDelay = true;
    },
    Delay() {
      delayNextTime(this.delay).then((res) => {
        this.queryList();
        this.closeDialog();
        this.delay = {};
      });
    },
    HomeVisits(id) {
      this.DialogHomeVisit = true;
      this.FindById(id);
      this.submitParams.result = "";
      this.submitParams.nextTime = "";
      this.submitParams.lastResult = "";
    },
    FindById(id) {
      for (var i = 0; i < this.items.length; i++) {
        if (id == this.items[i].id) {
          this.items[i].sex = parseInt(this.items[i].sex);
          this.submitParams = JSON.parse(JSON.stringify(this.items[i]));
          break;
        }
      }
    },
    handleSelect() {
      selectByName(this.queryParams).then((res) => {
        res.data.data.forEach((item) => {
          item.lastTime = getTimeFor(item.lastTime);
          item.nextTime = this.computedTime(
            new Date(item.nextTime),
            new Date()
          );
        });
        this.items = res.data.data;
      });
      this.queryParams = {};
    },
    saveHomeForm() {
      this.$refs.submitParamsForm.validate((valid) => {
        if (valid) {
          save(this.submitParams).then((res) => {
            if (res.data.code == 200) {
              this.$notify({
                title: "成功",
                message: "家访记录成功",
                type: "success",
                duration: 1500,
              });
              this.closeDialog();
              this.delay = {};
              this.queryList();
            }
          });
        }
      });
    },
    closeDialog() {
      this.DialogDelay = false;
      this.DialogHomeVisit = false;
    },
  },
};
</script>
<style>
.Form .el-form-item__label {
  width: 150px;
}
</style>
<style scoped lang="scss">
.body_box {
  width: 100%;
  height: auto;
  margin-bottom: 5px;
  .box_header {
    width: 100%;
    height: 7vh;
  }
  .box_content {
    width: 100%;
    height: 67vh;
    .red {
      color: red;
      font-weight: 600;
    }
    .page {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-right: 20px;
      align-items: end;
      width: 100%;
      height: 40px;
      background-color: white;
    }
  }
}

::v-deep .Mydialog {
  border-radius: 20px;
  .Form {
    align-items: center;
    .Form_item {
      width: 220px;
    }
  }
}
</style>
